<template>
  <div class="main-container">
    <!-- <div style="background-color: #fff;">

      <div class="bg-container">
        <a-form size="small" :model="queryData" layout="inline">
          <a-form-item label="公司编号">
            <a-select popup-container="html"  v-model="queryData.firm" @change="changeFirmCode">
              <a-option v-for="item in pageData.gcList" :value="item.id">{{item.name}}</a-option>
            </a-select>
          </a-form-item>
        </a-form>
        <a-form size="small" :model="queryData" layout="inline">
          <a-form-item label="公司">
            <a-select popup-container="html"  v-model="queryData.firm" @change="changeFirmCode">
              <a-option v-for="item in pageData.gcList" :value="item.id">{{item.name}}</a-option>
            </a-select>
          </a-form-item>
        </a-form>
        <a-form size="small" :model="queryData" layout="inline">
          <a-form-item label="公司地址">
            <a-select popup-container="html"  v-model="queryData.firm" @change="changeFirmCode">
              <a-option v-for="item in pageData.gcList" :value="item.id">{{item.name}}</a-option>
            </a-select>
          </a-form-item>
        </a-form>
        <a-form size="small" :model="queryData" layout="inline">
          <a-form-item label="公司法人">
            <a-select popup-container="html"  v-model="queryData.firm" @change="changeFirmCode">
              <a-option v-for="item in pageData.gcList" :value="item.id">{{item.name}}</a-option>
            </a-select>
          </a-form-item>
        </a-form>
        <a-form size="small" :model="queryData" layout="inline">
          <a-form-item label="统一社会信用代码">
            <a-select popup-container="html"  v-model="queryData.firm" @change="changeFirmCode">
              <a-option v-for="item in pageData.gcList" :value="item.id">{{item.name}}</a-option>
            </a-select>
          </a-form-item>
        </a-form>
        <Toolbar :items="['新增','删除','导出']" @add="addHandler" @del="deleteHandler"></Toolbar>
      </div>

      <div class="gang"></div>

      <div style="padding:10px;box-sizing: border-box;" @click="isShowInfo">
        <a-tabs   :lazy-load="true">
          <a-tab-pane title="公司列表">
            <a-table stripe :bordered="true" :columns="tableColumns" :row-selection="{showCheckedAll:true,width:50}"
              v-model:selected-keys="selectedRowKeys" :loading="table.tableLoading" :data="table.dataList"
              :pagination="pagination" :rowKey="rowKey">
              <template #edit="{record}">
                <a-button @click="editHandler(record)" />
              </template>

            </a-table>
          </a-tab-pane>
        </a-tabs> 
        
    </div>

      <a-drawer ok-text='保存' cancel-text='关闭'  :drawer-style="{'zIndex':9999}" :width="400" :placement="Button" :visible="pageData.showAdd" unmountOnClose @ok="sideOk"
        @cancel="pageData.showAdd=false">
        <template #title>
          {{pageData.sideTitle}}
        </template>
        <div>
          <a-form ref="formRef" layout="vertical" :model="dataForm">
            <a-form-item label="公司" field="firm" :rules="[{required:true,message:'公司必填'}]"
              :validate-trigger="['change','blur']">
              <a-input placeholder="请输入公司" v-model="dataForm.firm" />
            </a-form-item>
            <a-form-item label="公司地址" field="colorName">
              <a-input placeholder="请输入公司地址" v-model="dataForm.colorName" />
            </a-form-item>
            <a-form-item label="公司法人" field="remark">
              <a-input placeholder="请输入公司法人" v-model="dataForm.remark" />
            </a-form-item>
            <a-form-item label="统一社会信用代码" field="remark">
              <a-input placeholder="请输入统一社会信用代码" v-model="dataForm.remark" />
            </a-form-item>
            <a-form-item label="公司性质" field="remark">
              <a-input placeholder="请输入公司性质" v-model="dataForm.remark" />
            </a-form-item>
            <a-form-item label="公司所属行业" field="remark">
              <a-input placeholder="请输入公司所属行业" v-model="dataForm.remark" />
            </a-form-item>
            <a-form-item label="成立日期" field="remark">
              <a-input placeholder="请输入成立日期" v-model="dataForm.remark" />
            </a-form-item>
          </a-form>
          <div>
            <a-space>
              <a-button  @click="isShowInfo('1')">基本信息</a-button>
              <a-button  @click="isShowInfo('2')">开票单位</a-button>
            </a-space>
          </div>
          <div style="padding:10px;box-sizing: border-box;">

            <div style="padding:10px;box-sizing: border-box;">
          <a-tab-pane title="基本信息">
                    <a-table stripe :bordered="true" :columns="tableColumns" 
                    :row-selection="{showCheckedAll:true,width:50}"
                    v-model:selected-keys="selectedRowKeys"  
                    :loading="table.tableLoading" :data="table.dataList"
                     :pagination="pagination" :rowKey="rowKey">
                    </a-table>
                </a-tab-pane>  
          <a-tab-pane title="开票单位">
              <a-table stripe :bordered="true" :columns="tableColumns" 
              :row-selection="{showCheckedAll:true,width:50}"
              v-model:selected-keys="selectedRowKeys"  
              :loading="table.tableLoading" :data="table.dataList"
               :pagination="pagination" :rowKey="rowKey">
              </a-table>
          </a-tab-pane>  
        
    </div>

       
      </div>
        </div>
      </a-drawer>
    </div> -->

  </div>
</template>
<script lang="ts">
import { post } from '@/api/http'
import { useTable, useRowKey, useTableColumn, usePagination, useRowSelection } from '@/hooks/table';

import { ref, reactive, onMounted, toRefs } from 'vue'
import Toolbar from '@/components/Toolbar.vue';
import { Button, Form, Message, Modal } from '@arco-design/web-vue';
import { FormInstance } from '@arco-design/web-vue/es/form';


export default {
  name: "Department",
  setup() {
    const showBasicInformation=ref(false);
    const showIssuingOffice=ref(false);
    const isShowInfo = (type:any)=>{
        if(type=="1"){
          showBasicInformation.value=!showBasicInformation.value;
        }else if(type=="2"){
          showIssuingOffice.value=!showIssuingOffice.value;
        }
    }
    // const 
  //     function doRefresh() {
  //         post({
  //             url: "PdDaniel/getPage",
  //             data: {
  //                 page: pagination.page,
  //                 size: pagination.pageSize,
  //                 isDelete:"0"
  //             },
  //         })
  //             .then(({ data, code }: any) => {
  //             if (code === 200) {
  //                 table.handleSuccess(data.list);
  //                 pagination.setTotalSize(data.total);
  //             }
  //         })
  //             .catch(console.log);
  //     }
  //     const { selectedRowKeys, onSelectionChange } = useRowSelection();
  //     const pagination = usePagination(doRefresh);
  //     const table = useTable();
  //     const rowKey = useRowKey("id");
  //     const tableColumns = useTableColumn([
  //         {
  //             title: "公司编号",
  //             key: "code",
  //             dataIndex: "code",
  //         },
  //         {
  //             title: "公司",
  //             key: "firm",
  //             dataIndex: "firm",
  //         },

  //         {
  //             title: "公司地址",
  //             key: "soledadName",
  //             dataIndex: "soledadName",
  //         },
  //         {
  //             title: "公司法人",
  //             key: "soledadCategory",
  //             dataIndex: "soledadCategory",
  //         },
  //         {
  //             title: "统一社会信用代号",
  //             key: "soledadNum",
  //             dataIndex: "soledadNum",
  //         },
  //         {
  //             title: "公司性质",
  //             key: "coefficientDaniel",
  //             dataIndex: "coefficientDaniel",
  //         },
  //         {
  //             title: "公司所属行业",
  //             key: "remake",
  //             dataIndex: "remake",
  //         },
  //         {
  //             title: "成立日期",
  //             key: "createTime",
  //             dataIndex: "createTime",
  //         },
  //         {
  //             title: "编辑",
  //             key: "edit",
  //             dataIndex: "edit",
  //             slotName: 'edit'
  //         },

  //     ]);
  //     const dataForm = reactive<Department>({
  //         "id": "",
  //         "code": "",
  //         "firm": "",
  //         "soledadId": "",
  //         "soledadName": "",
  //         "soledadCategory": "",
  //         "soledadNum": "",
  //         "coefficientDaniel": "",
  //         "remake": "",
  //         "isDetele": 0,
  //         "createName": "",
  //         "createTime": "",
  //         "updateName": "",
  //         "updateTime": ""
  //     })
  //     const pageData = reactive<{
  //         gcList: Firm[];
  //         showAdd:boolean,
  //         sideTitle:string
  //     }>({
  //         gcList: [],
  //         showAdd:false,
  //         sideTitle:'新增丹尼尔系数'
  //     });

  //     onMounted(() => {
  //         doRefresh();
  //     });
  //     const queryData = reactive({
  //         firm: "",

  //     });

  //     post({
  //         url: "PdDaniel/getList",
  //         data:queryData.firm
  //     }).then(({ data, code }: any) => {
  //         if (code === 200) {
  //             table.handleSuccess(data.list);
  //                 pagination.setTotalSize(data.total);

  //         }
  //     });
  //     const addHandler = ()=>{
  //         pageData.showAdd = true
  //         pageData.sideTitle = '新增丹尼尔系数'

  //     }
  //       //修改 record（本行数据）
  //       const editHandler = (record:any)=>{
  //         dataForm.id=record.id

  //         //侧滑栏滑出滑入
  //         pageData.showAdd = true
  //         pageData.sideTitle = '修改丹尼尔系数'

  //     }

  //     const formRef = ref<FormInstance>()

  //         const sideOk=()=>{
  //         formRef.value?.validate().then((err)=>{
  //             if( pageData.sideTitle === '新增丹尼尔系数'){
  //                 //添加
  //                 if(!err){
  //                 post({
  //                     url:'PdDaniel/add',
  //                     data:[dataForm]
  //                 }).then((res :any)=>{

  //                     if(res.code === 200){
  //                         formRef.value?.resetFields()
  //                         pageData.showAdd = false
  //                         Message.success({
  //                             content:'新增成功',
  //                             duration:5000
  //                         })
  //                     } else {
  //                         Message.error({
  //                             content:res.message,
  //                             duration:5000
  //                         }) 
  //                     }
  //                     doRefresh()
  //                 })
  //                 }
  //             }else if( pageData.sideTitle === '修改丹尼尔系数'){
  //                 //修改
  //                 post({
  //                     url: "PdDaniel/update",
  //                     data:[dataForm]
  //                 }).then(({ data, code,message }: any) => {
  //                     if (code === 200) {
  //                         formRef.value?.resetFields()
  //                         Message.success({
  //                                         content:'修改成功',
  //                                         duration:5000
  //                                     })

  //                     }else{
  //                         Message.success({
  //                                         content:message,
  //                                         duration:5000
  //                                     })
  //                     }
  //                 });
  //             }


  //         })
  //     }

  //     const deleteHandler = () =>{
  //         if( selectedRowKeys.value.length === 0 ){
  //             return
  //         } 
  //         Modal.confirm({
  //             title:'系统提示',
  //             content:'确认删除选中的数据?',
  //             onOk(){
  //                 post({
  //                     url:'PdDaniel/delete',
  //                     data:selectedRowKeys.value
  //                 }).then(({code,data}:any)=>{
  //                     if(code === 200){
  //                         Message.success({
  //                             content:'删除成功',
  //                             duration:5000
  //                         })
  //                     } else {
  //                         Message.success({
  //                             content:'修改失败',
  //                             duration:5000
  //                         })
  //                     }
  //                     doRefresh()
  //                 })
  //             }
  //         })
  //     }
  //      //工厂下拉框改变事件
  //      const changeFirm =() =>{
  //         post({
  //             url: "color/getColorPage",
  //             data: {
  //                 firm: queryData.firm,

  //             },
  //         })
  //             .then(({ data, code }: any) => {
  //             if (code === 200) {
  //                 table.handleSuccess(data.list);
  //                 pagination.setTotalSize(data.total);
  //             }
  //         })
  //             .catch(console.log);
  //     }
      return {
        isShowInfo
          // deleteHandler,
          // sideOk,
          // formRef,
          // dataForm,
          // addHandler,
          // selectedRowKeys,
          // pagination,
          // tableColumns,
          // table,
          // rowKey,
          // pageData,
          // queryData,
          // changeFirm,
          // editHandler
      };
  },
  components: { Toolbar }
}
</script>

<style lang="less" scoped>
:deep(.arco-table-cell-expand-icon) {
  //justify-content: center;
}
</style>
